<template>
  <v-dialog ref="dialog" v-model="dialogStatus" :return-value.sync="currentVal" persistent full-width width="290px">

    <template v-slot:activator="{ on }">
      <v-text-field
        v-model="inputPart"
        :label="label"
        append-icon="mdi-calendar-range"
        readonly
        outlined
        :rules="rules"
        v-on="on"
      ></v-text-field>
    </template>

    <v-date-picker v-show="!showTimePart" @change="datePartChangeHandle" v-model="datePart" :show-current="false"
                   show-current="false" scrollable>
      <v-spacer></v-spacer>
      <v-btn text color="primary" @click="clear">清除</v-btn>
      <v-spacer></v-spacer>
    </v-date-picker>

    <v-time-picker v-show="showTimePart" v-model="timePart" format="24hr">
      <v-btn color="primary" icon light @click="showTimePart=false">
        <v-icon>mdi-keyboard-backspace</v-icon>
      </v-btn>
      <v-spacer></v-spacer>
      <v-btn text color="primary" @click="cancel">取消</v-btn>
      <v-btn text color="primary" @click="commit">确定</v-btn>
    </v-time-picker>

  </v-dialog>
</template>

<script>
    import moment from 'moment';

    /**
     * 时间选择器 【yyyy-DD-dd HH:mm:ss】
     * @author Canaan
     * @date 2019/8/13 18:06.
     */
    export default {
        name: 'DateTimePicker',
        mounted() {

        },
        components: {},
        props: {
            label: {
                default: '请选择',
                type: String
            },
            value: {
                default: (new Date()).getTime(),  //13 位时间戳
            },
            rules: null
        },
        data() {
            return {
                showTimePart: false,
                currentVal: this.value,
                dialogStatus: false,
                datePart: this.datePartFormatter(this.value),
                timePart: this.timePartFormatter(this.value),
                inputPart: this.inputPartFormatter(this.value)
            }
        },
        computed: {},
        methods: {
            inputPartFormatter(val) {
                if (val) {
                    return moment(val).format("YYYY-MM-DD HH:mm:ss");
                }
                return "";
            },
            datePartFormatter(val) {
                if (val) {
                    return moment(val).format("YYYY-MM-DD");
                }
                return "";
            },
            timePartFormatter(val) {
                if (val) {
                    return moment(val).format("HH:mm:ss");
                }
                return "";
            },
            datePartChangeHandle(val) {
                this.showTimePart = true;
            },
            clear() {
                this.showTimePart = false;
                this.datePart = "";
                this.timePart = "";
                this.inputPart = "";
                this.currentVal = null;
                this.$emit('input', this.currentVal);
                this.dialogStatus = false;
            },
            cancel() {
                this.showTimePart = false;
                this.datePart = this.datePartFormatter(this.currentVal);
                this.timePart = this.timePartFormatter(this.currentVal);
                this.dialogStatus = false;
            },
            commit() {
                if (!this.timePart) {
                    this.timePart = "00:00:00";
                }
                this.showTimePart = false;
                this.currentVal = moment(this.datePart + " " + this.timePart).valueOf();
                this.inputPart = this.inputPartFormatter(this.currentVal);
                this.$emit('input', this.currentVal);
                this.$refs.dialog.save(this.currentVal);
            }
        },
        watch: {
            value(val) {
                this.currentVal = val;
                this.datePart = this.datePartFormatter(val);
                this.timePart = this.timePartFormatter(val);
                this.inputPart = this.inputPartFormatter(val);
            }
        },
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style scoped>

</style>
